<template>
    <view class="page__bd">
        <view class="hb-bar bg-white solid-bottom">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>宫格列表
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="onShowModal" data-target="gridModal">设置</button>
            </view>
        </view>
        <view class="hb-list grid" :class="['col-'+gridCol,gridBorder?'':'no-border']">
            <view class="hb-list__item" v-for="(item,index) in iconList" :key="index">
                <view :class="[item.icon,'text-'+item.color]">
                    <view class="hb-tag badge" v-if="item.badge!=0">
                        <block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
                    </view>
                </view>
                <text>{{item.name}}</text>
            </view>
        </view>
        <view class="hb-modal" :class="modalName=='gridModal'?'show':''" @tap="onHideModal">
            <view class="hb-dialog" @tap.stop>
                <radio-group class="block" @change="onGridchange">
                    <view class="hb-list menu text-left">
                        <view class="hb-list__item" v-for="(item,index) in 3" :key="index">
                            <label class="flex justify-between align-center flex-sub">
                                <view class="flex-sub">{{index +3}} 列</view>
                                <radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''"
                                    :checked="gridCol==index+3"></radio>
                            </label>
                        </view>
                    </view>
                </radio-group>
                <view class="hb-list menu text-left solid-top">
                    <view class="hb-list__item">
                        <view class="content">
                            <text class="text-grey">边框</text>
                        </view>
                        <view class="action">
                            <switch @change="onGridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action"> <text class="hb-icon_title text-blue"></text>菜单列表</view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="onShowModal" data-target="menuModal">设置</button>
            </view>
        </view>
        <view class="hb-modal" :class="modalName=='menuModal'?'show':''" @tap="onHideModal">
            <view class="hb-dialog" @tap.stop>
                <view class="hb-list menu text-left solid-top">
                    <view class="hb-list__item">
                        <view class="content">
                            <text class="text-grey">短边框</text>
                        </view>
                        <view class="action">
                            <switch @change="onMenuBorder" :class="menuBorder?'checked':''" :checked="menuBorder?true:false"></switch>
                        </view>
                    </view>
                    <view class="hb-list__item">
                        <view class="content">
                            <text class="text-grey">箭头</text>
                        </view>
                        <view class="action">
                            <switch @change="onMenuArrow" :class="menuArrow?'checked':''" :checked="menuArrow?true:false"></switch>
                        </view>
                    </view>
                    <view class="hb-list__item">
                        <view class="content">
                            <text class="text-grey">卡片</text>
                        </view>
                        <view class="action">
                            <switch @change="onMenuCard" :class="menuCard?'checked':''" :checked="menuCard?true:false"></switch>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="hb-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <view class="content">
                    <text class="hb-icon_qr_code text-grey"></text>
                    <text class="text-grey">图标 + 标题</text>
                </view>
            </view>
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <view class="content">
                    <image src="/static/logo.png" class="png" mode="aspectFit"></image>
                    <text class="text-grey">图片 + 标题</text>
                </view>
            </view>
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <button class="hb-btn content" open-type="contact">
                    <text class="hb-icon_title text-red"></text>
                    <text class="text-grey">Open-type 按钮</text>
                </button>
            </view>
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
                    <text class="hb-icon_title text-bold"></text>
                    <text class="text-grey">Navigator 跳转</text>
                </navigator>
            </view>
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <view class="content">
                    <text class="text-grey">头像组</text>
                </view>
                <view class="action">
                    <view class="hb-avatar_group">
                        <view class="hb-avatar round sm" style="background-image:url(https://img.18183.com/uploads/allimg/191031/266-191031164046.jpg);"></view>
                        <view class="hb-avatar round sm" style="background-image:url(https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg);"></view>
                        <view class="hb-avatar round sm" style="background-image:url(https://img.18183.com/uploads/allimg/190219/237-1Z21Z94014954.png);"></view>
                        <view class="hb-avatar round sm" style="background-image:url(https://img.18183.com/uploads/allimg/181229/237-1Q2291H404N0.jpg);"></view>
                    </view>
                    <text class="text-grey text-sm">4 人</text>
                </view>
            </view>
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <view class="content">
                    <text class="text-grey">按钮</text>
                </view>
                <view class="action">
                    <button class="hb-btn round hb-btn_success shadow">
                        <text class="hb-icon_upload"></text> 上传</button>
                </view>
            </view>
            <view class="hb-list__item" :class="menuArrow?'arrow':''">
                <view class="content">
                    <text class="hb-icon_discount text-red  margin-right-xs"></text>
                    <text class="text-grey">标签</text>
                </view>
                <view class="action">
                    <view class="hb-tag round bg-light_blue light">音乐</view>
                    <view class="hb-tag round bg-green light">电影</view>
                    <view class="hb-tag round bg-blue light">旅行</view>
                </view>
            </view>
            <view class="hb-list__item " :class="menuArrow?'arrow':''">
                <view class="content">
                    <text class="hb-icon_prompt-fill text-green"></text>
                    <text class="text-grey">文本</text>
                </view>
                <view class="action">
                    <text class="text-grey text-sm">小目标还没有实现！</text>
                </view>
            </view>
            <view class="hb-list__item">
                <view class="content padding-tb-sm">
                    <view>
                        <text class="hb-icon_prompt-fill text-blue margin-right-xs"></text> 多行Item</view>
                    <view class="text-gray text-sm">
                        <text class="hb-icon_prompt-fill margin-right-xs"></text> 小目标还没有实现！</view>
                </view>
                <view class="action">
                    <switch @change="onSwitchSex" :class="skin?'checked':''" :checked="skin?true:false"></switch>
                </view>
            </view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action"><text class="hb-icon_title text-orange"></text>消息列表</view>
        </view>
        <view class="hb-list menu-avatar">
            <view class="hb-list__item">
                <view class="hb-avatar round lg" style="background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg);"></view>
                <view class="content">
                    <view class="text-grey">罗槟</view>
                    <view class="text-gray text-sm flex">
                        <view class="hb-ellipsis">
                            <text class="hb-icon_prompt-fill text-orange margin-right-xs"></text>
                            人为了达到正义的目的，尤其是当遭遇的对手比较没底线的时候，不得不做出一两件看起来不太高尚的事情。
                        </view>
                    </view>
                </view>
                <view class="action">
                    <view class="text-grey text-xs">22:20</view>
                    <view class="hb-tag round bg-grey sm">5</view>
                </view>
            </view>
            <view class="hb-list__item">
                <view class="hb-avatar round lg" style="background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg);">
                    <view class="hb-tag badge">99+</view>
                </view>
                <view class="content">
                    <view class="text-grey">
                        <text class="text-bold">罗槟</text>
                        <view class="hb-tag round bg-orange sm">律师</view>
                    </view>
                    <view class="text-gray text-sm flex">
                        <view class="hb-ellipsis">
                            <text class="hb-icon_prompt-fill text-orange margin-right-xs"></text>
                            跟魔鬼打交道，总要有点魔鬼的手段
                        </view>
                    </view>
                </view>
                <view class="action">
                    <view class="text-grey text-xs">22:20</view>
                    <view class="hb-tag round bg-grey sm">5</view>
                </view>
            </view>
            <view class="hb-list__item grayscale">
                <view class="hb-avatar radius lg" style="background-image:url(http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg);"></view>
                <view class="content">
                    <view>
                        <view class="text-cut">伊泽瑞尔</view>
                        <view class="hb-tag round bg-orange sm">断开连接...</view>
                    </view>
                    <view class="text-gray text-sm flex">
                        <view class="text-cut">无论走到哪里，都应该记得，过去都是假的</view>
                    </view>
                </view>
                <view class="action">
                    <view class="text-grey text-xs">22:20</view>
                    <view class="hb-tag round bg-red sm">5</view>
                </view>
            </view>
        </view>

        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action"><text class="hb-icon_title text-blue"></text>列表左滑</view>
        </view>
        <view class="hb-list menu-avatar">
            <view class="hb-list__item" :class="modalName=='move-box-'+index?'move-cur':''" v-for="(item,index) in 4"
                :key="index" @touchstart="onListTouchStart" @touchmove="onListTouchMove" @touchend="onListTouchEnd"
                :data-target="'move-box-' + index">
                <view class="hb-avatar round lg" style="background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg);"></view>
                <view class="content">
                    <view class="text-grey">罗槟</view>
                    <view class="text-gray text-sm flex">
                        <view class="hb-ellipsis">
                            <text class="hb-icon_prompt-fill text-orange margin-right-xs"></text>
                            人为了达到正义的目的，尤其是当遭遇的对手比较没底线的时候，不得不做出一两件看起来不太高尚的事情。
                        </view>
                    </view>
                </view>
                <view class="action">
                    <view class="text-grey text-xs">22:20</view>
                    <view class="hb-tag round bg-grey sm">5</view>
                </view>
                <view class="move" @tap.stop>
                    <view class="bg-grey">取消</view>
                    <view class="bg-red" @tap="onDel">删除</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                iconList: [{
                    icon: "hb-icon_view",
                    color: 'red',
                    badge: 120,
                    name: '显示'
                }, {
                    icon: "hb-icon_view_off",
                    color: 'yellow',
                    badge: 1,
                    name: '不显示'
                }, {
                    icon: "hb-icon_search",
                    color: 'red',
                    badge: 0,
                    name: '搜索'
                }, {
                    icon: "hb-icon_close",
                    color: 'red',
                    badge: 0,
                    name: '关闭'
                }, {
                    icon: "hb-icon_qr_code",
                    color: 'red',
                    badge: 0,
                    name: '二维码'
                }, {
                    icon: "hb-icon_data",
                    color: 'red',
                    badge: 0,
                    name: '数据'
                }, {
                    icon: "hb-icon_locationfill",
                    color: 'red',
                    badge: 0,
                    name: '地点'
                }, {
                    icon: "hb-icon_cameraadd",
                    color: 'red',
                    badge: 0,
                    name: '相册'
                }],
                modalName: '',
                gridCol: 3,
                gridBorder: false,
                skin: false,
                menuArrow: false,
                menuBorder: false,
                menuCard: false,
                listTouchStart: 0,
                listTouchDirection: ''
            }
        },
        methods: {
            //显示模态框
            onShowModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            //隐藏模态框
            onHideModal(e) {
                this.modalName = ''
            },
            //宫格列表显示列数
            onGridchange(e) {
                this.gridCol = e.detail.value
            },
            //宫格列表 是否显示边框
            onGridswitch(e) {
                this.gridBorder = e.detail.value
            },
            onSwitchSex(e) {
                this.skin = e.detail.value
            },
            //菜单列表是否显示短边框
            onMenuBorder(e) {
                this.menuBorder = e.detail.value
            },
            //菜单列表是否显示右箭头
            onMenuArrow(e) {
                this.menuArrow = e.detail.value
            },
            //菜单列表是否显示卡片式
            onMenuCard(e) {
                this.menuCard = e.detail.value
            },
            //列表触摸开始
            onListTouchStart(e) {
                this.listTouchStart = e.touches[0].pageX
            },
            //列表滑动计算方向
            onListTouchMove(e) {
                //this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
                let offset = e.touches[0].pageX - this.listTouchStart
                if (offset > 50) {
                    this.listTouchDirection = 'right'
                } else if (offset < -50) {
                    this.listTouchDirection = 'left'
                }
            },
            //列表停止滑动，计算滚动
            onListTouchEnd(e) {
                if (this.listTouchDirection == "left") {
                    this.modalName = e.currentTarget.dataset.target
                } else {
                    this.modalName = '';
                }
                this.listTouchDirection = ''
            },
            onDel(e){
                uni.showModal({
                    title:"是否删除"
                })
            }
        }
    }
</script>

<style>
</style>
